*{
	margin: 0;
	padding: 0px;
	font-size: 24px;
	text-decoration: none;
	list-style: none;
}

body{
    font-family:'Microsoft Yahei','微软雅黑', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 使用微软雅黑等易读字体 */ 
	color: #333; /* 基础文字颜色 */  
	 line-height: 1.7; /* 基础行高 */  
	 font-size: 16px; /* 基础字号 */  
	-webkit-text-size-adjust: 100%; /* 禁止iOS调整字体大小 */  
	-webkit-font-smoothing: antialiased; /* 抗锯齿，让文字更加平滑 */ 
}


h1, h2, h3, h4, h5, h6 {  
  font-weight: normal; /* 标题通常不需要加粗 */  
  color: #222; /* 标题颜色略深于正文 */  
  margin: 0 0 1em 0; /* 标题之间的间距 */  
}


h1 { font-size: 24px; }  
h2 { font-size: 20px; }  
h3 { font-size: 18px; }  
h4 { font-size: 16px; }  
h5 { font-size: 14px; }  
h6 { font-size: 12px; }  
  
/* 段落样式 */  
p {  
  margin: 0 0 1em 0; /* 段落间距 */  
}  
  
/* 链接样式 */  
a {  
  color: #007BFF; /* 链接颜色 */  
  text-decoration: none; /* 去除下划线 */  
  transition: color 0.3s ease; /* 颜色变化过渡效果 */  
}  
  
a:hover {  
  color: #0056b3; /* 鼠标悬停时的链接颜色 */  
  text-decoration: underline; /* 鼠标悬停时显示下划线 */  
}

/* 强调样式 */  
strong {  
  font-weight: bold; /* 加粗 */  
}  
  
em {  
  font-style: italic; /* 斜体 */  
}  


textarea,input:focus {
		border: none;
		outline: none;
		/* 移除点击后的外边框 */
		box-shadow: none;
		/* 移除点击后的阴影效果 */
}

/* 如果需要优化可读性 */  
.readable-text {  
  letter-spacing: 0.02em; /* 轻微的字间距 */  
  word-spacing: 0.05em; /* 轻微的词间距 */  
}

.shadow {  
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.15);  
}

.left_shadow {  
  box-shadow: 10px 0 15px -5px rgba(0, 0, 0, 0.3);  
}

.right_shadow {  
  box-shadow: -10px 0 15px -5px rgba(0, 0, 0, 0.3);  
}
//背景
.bg{
		width: 100vw;
		height: auto;
		min-height: 100vh;
		position: absolute;
		z-index: -1;
		background-color: #f3f3f3; /* 调整背景颜色为较浅的灰色 */
		opacity: 1; /* 移除透明度，确保背景色清晰可见 */  
		background-image: linear-gradient(to bottom, #f8f8f8, #f3f3f3); /* 轻微调整渐变颜色 */ 
}

//卡片
.card {  
    background-color: #ffffff; /* 保持卡片背景为白色，与灰色背景形成对比 */  
    width: 90vw;  
    border-radius: 2vw;  
    margin: 0 auto;  
    margin-top: 1vh;  
    margin-bottom: 4vw;  
    padding: 2vw;  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，提升卡片的立体感 */  
    z-index: 2; /* 确保卡片位于背景之上 */  
}
//底部占位撑开
.placeblock{
	content: '';
	opacity: 0;
	width: 100vw;
	height: 10vh;
	z-index: -1;
}
//卡片标题
.card_title{
	font-size:42px;
	padding: 0vw 1vw 1vw 1vw;
	border-bottom: 1px solid #ebebeb;
	padding-bottom: 20px;
	margin-bottom: 1vw;
	padding-left: 2vw;
	box-sizing: border-box;
	font-weight: bold;
	color: #333;
	
}
//卡片正文
.card_context{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}
//卡片内的TAG标签
.card_context div{
	margin: 3vw;
	border: 1px solid #ebebeb;
	background-color: #efefef;
	border-radius: 10px;
	padding: 10px;
}
button,input{
	border: none;
}


//动画 


//闪烁
@keyframes blink {  
  0%, 100% { opacity: 1; }  
  50% { opacity: 0; }  
}

//心跳
@keyframes heartbeat {  
  0%, 100% { transform: scale(1); }  
  50% { transform: scale(1.1); }  
}

//旋转
@keyframes rotate {  
  from {  
    transform: rotate(0deg);  
  }  
  to {  
    transform: rotate(360deg);  
  }  
}


//弹跳
@keyframes bounce {  
  0%, 100%, 20%, 50%, 80% {  
    transform: translateY(0);  
  }  
  40% {  
    transform: translateY(-30px);  
  }  
  60% {  
    transform: translateY(-15px);  
  }  
}

//摇摆
@keyframes swing {  
  0% {  
    transform: rotate(0deg);  
  }  
  10% {  
    transform: rotate(10deg);  
  }  
  30% {  
    transform: rotate(-10deg);  
  }  
  50% {  
    transform: rotate(10deg);  
  }  
  70% {  
    transform: rotate(-10deg);  
  }  
  90% {  
    transform: rotate(10deg);  
  }  
  100% {  
    transform: rotate(0deg);  
  }  
}


//脉冲
@keyframes pulse {  
  0% {  
    transform: scale(1);  
    opacity: 1;  
  }  
  50% {  
    transform: scale(1.1);  
    opacity: 0.7;  
  }  
  100% {  
    transform: scale(1);  
    opacity: 1;  
  }  
}

//缩放
@keyframes scale {  
  0% {  
    transform: scale(1);  
  }  
  50% {  
    transform: scale(1.2);  
  }  
  100% {  
    transform: scale(1);  
  }  
}

//抖动
@keyframes shake {  
  0% { transform: translate(1px, 1px) rotate(0deg); }  
  10% { transform: translate(-1px, -2px) rotate(-1deg); }  
  20% { transform: translate(-3px, 0px) rotate(1deg); }  
  30% { transform: translate(3px, 2px) rotate(0deg); }  
  40% { transform: translate(1px, -1px) rotate(1deg); }  
  50% { transform: translate(-1px, 2px) rotate(-1deg); }  
  60% { transform: translate(-3px, 1px) rotate(0deg); }  
  70% { transform: translate(3px, 1px) rotate(-1deg); }  
  80% { transform: translate(-1px, -1px) rotate(1deg); }  
  90% { transform: translate(1px, 2px) rotate(0deg); }  
  100% { transform: translate(1px, -2px) rotate(-1deg); }  
}

